<template>
  <base-window title="邮件内容详情" :show.sync="visible" size="medium" width="700px">
    <div class="base-modal-content" @click="getImg($event)">
      <div class="email-title">
        <div class="flex-between">
          <h2>{{detail.subject || ''}}</h2>
        </div>
      </div>
      <div class="email-person">
        <div><span class="left">发件人:</span>
          <span class="flex1">
            <span class="flex1 color-26"> {{ detail.senderName || ''}}</span>
          </span>
        </div>
        <div>
          <span class="left">收件人:</span>
          <span class="flex1" v-if="detail.receiver && detail.receiver.length">
            <template v-for="(user, index) in detail.receiver">
              <span :key="index" class="color-59">{{`&lt;${user.displayName || user.email || ''}&gt;`}}</span>
              {{index+1 != detail.receiver.length ? ',' : ''}}
            </template>
          </span>
        </div>
        <div>
          <span class="left">抄送:</span>
          <span class="flex1" v-if="detail.cc && detail.cc.length">
            <template v-for="(user, index) in detail.cc">
              <span :key="index" class="color-59">{{`&lt;${user.displayName || user.email || ''}&gt;`}}</span>
              {{index+1 != detail.cc.length ? ',' : ''}}
            </template>
          </span>
        </div>
        <div><span class="left">时间:</span><span class="flex1 color-26">{{ detail.sendTime | fmt_datetime }}</span></div>
        <template v-if="attachmentList.length">
          <div><span class="left">附件:</span><span class="flex1 color-26">{{attachmentList.length}}个</span></div>
          <div><span class="left">大小:</span><span class="flex1 color-26">{{detail.totalSize}}</span></div>
        </template>
      </div>
      <div class="email-content" v-html="content"></div>
      <div v-if="attachmentList.length" class="email-attachment">
        <i class="iconfont icon-fdn-attachment">附件 {{attachmentList.length}} 个</i>
        <div class="base-email-attachment base-file__preview">
          <base-file-item v-for="file in attachmentList" :source="attachmentList" :key="file.id" :file="file" readonly></base-file-item>
        </div>
      </div>
                    
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关 闭</el-button>
    </div>
  </base-window>
</template>

<script>
import { formatDate } from 'pub-bbx-utils';
import { getEmailDetail } from '@src/api/EmailApi';
export default {
  name: 'email-message-detail',
  data() {
    return {
      visible: false,
      detail: {},
      content: '',
      attachmentList: []
    }
  },
  methods: {
    open(item){
      this.visible = true;
      this.detail = item;
      this.content = item.content.replace(item.content ? /&(?!#?\w+;)/g : /&/g, '&amp;')
        .replace(/&lt;/g, '<')
        .replace(/&gt;/g, '>')
        .replace(/&quot;/g, '"')
        .replace(/&#39;/g, '\'');
      // 这里获取附件信息
      this.getDetail(item.id)
    },
    async getDetail(recordId){
      const { code, data } = await getEmailDetail({recordId})
      if(code != 0) return
      this.attachmentList = data.attachmentList || []
      // fileSize, filename, id, url
      this.attachmentList = this.attachmentList.map(item=>{
        item.url = item.ossUrl;
        item.filename = item.fileName;
        item.fileSize = item.filseSizeStr;
        return item;
      })
    },
    getImg(event){
      // console.log('event', event.target.currentSrc);

      const element = event.target;
      const imgSrc = element.currentSrc;

      if ((!/\.(png|bmp|gif|jpg|jpeg|tiff|tif|jfif|ico|pcx|tga)$/i.test(imgSrc) && !imgSrc) || !element) return;

      const list = event.target.closest('img');
      const images = Array.prototype.slice.call(list.querySelectorAll('img'));

      let currIndex = 0;
      const urls = images.map((item, index) => {
        if (item == element) currIndex = index;
        return item.getAttribute('src');
      });
      this.$platform.imagePreview({
        imageDom: list,
        currIndex,
        urls
      });
    },
  },
}
</script>

<style lang="scss">
.base-modal-content img {
  width: auto;
  height: auto;
}
.email-title {
  padding-bottom: 12px;
}
.flex-between {
  display: flex;
  justify-content: space-between;
  i {
    color: $color-primary-light-6;
  }
  .sender {
    font-weight: bold;
    margin-right: 5px; 
  }
}
.flex1 {
  flex: 1;
}
.color-26{
  color: #262626; 
}
.color-59{
 color: #595959; 
}
.email-person {
  padding-top: 20px;
  padding-bottom: 12px;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  div {
    display: flex;
    margin-bottom: 8px;
    .left {
      width: 60px;
      color: #595959;
      text-align: right;
      margin-right: 4px;
    }
  }
}
.email-content {
  padding-top: 20px;
  padding-bottom: 20px;
}
.email-attachment {
  padding-top: 20px;
  border-top: 1px solid #E5E5E5;

  .base-email-attachment {
    margin-top: 16px;
    padding: 12px;
    background: #f9f9f9;

    .base-file-item {
      margin-bottom: 12px;
    }
    .base-file-item:last-child{ 
      margin-bottom: 0;
    }
  }
}
</style>